<template>
<div v-if="open">
	<div class="calendar-box">
		<div class="modal show"></div>
		<div class="calendar">
			<div class="handle-col flex flex-spac-x">
				<p></p>
				<p><i v-on:click="tip" class="iconfont yiwen-icon icon-yiwencopy"></i>选择预约日期</p>
				<span v-on:click="_close" class="iconfont close-box icon-guanbi1"></span>
			</div>
			<div class="tip">提示: 平台默认一张图/天/人分配，多图可约多人同时进行</div>
			<StarView />
			<!-- 用事件委托， 避免性能问题 , tip, 之所以放两个data tag是因为js这样就可以避免先上递归操作-->
			<div class="scroll" @click="siteTouch">
				<div class="inner" v-for="(o, index) in list" :key="index"> 
					<div
					:data-clickTg="item.timev"
					class="block" 
					:class="[
						// 历史
						nowTimeStr && +new Date(item.timev) < +new Date(nowTimeStr) && 'is-exp',
						// 超过十五天
						nowTimeStr && +new Date(item.timev) > +new Date(nowTimeStr) + (1000 * 60 * 60 * 24 * 14) && 'is-exp',
						// 已选
						selecteds.includes(item.timev) && 'cell-selecteds'
					]"
					v-for="(item, dateIndex) in o.m" 
					:key="`date_${dateIndex}`" 
						:style="{'opacity': !item.v ? '0' : '1'}" 
					>
						<span  v-if="nowTimeStr !== item.timev
							&& !fullDate.includes(item.timev)
							&& +new Date(item.timev) != +new Date(nowTimeStr) + (1000 * 60 * 60 * 24)
							&& +new Date(item.timev) != +new Date(nowTimeStr) + (1000 * 60 * 60 * 24 * 2)
						"
						class="time-text-box cell-stauts-1" 
						:data-clickTg="JSON.stringify(item)" 
						>{{item.v}}</span>
						<span v-if="nowTimeStr === item.timev && !fullDate.includes(item.timev)"
						class="time-text-box cell-stauts-1" 
						:data-clickTg="JSON.stringify(item)" 
						>今</span>
						<span v-if="nowTimeStr && !fullDate.includes(item.timev) && +new Date(item.timev) == +new Date(nowTimeStr) + (1000 * 60 * 60 * 24)"
						class="time-text-box cell-stauts-1" 
						:data-clickTg="JSON.stringify(item)" 
						>明</span>
						<span v-if="nowTimeStr && !fullDate.includes(item.timev) && +new Date(item.timev) == +new Date(nowTimeStr) + (1000 * 60 * 60 * 24 * 2)"
						class="time-text-box cell-stauts-1" 
						:data-clickTg="JSON.stringify(item)" 
						>后</span>
						<span v-if="fullDate.includes(item.timev)"
						class="time-text-box cell-stauts-2" 
						:data-clickTg="JSON.stringify(item)" 
						>满</span> 
					</div>
				</div>
			</div>
			<!-- 显示结果 -->
			<div class="select-instructions-show flex flex-center-x">
				<div class="item flex">
					<span class="select-radius-1 radius"></span>
					<span class="name">可约</span>
				</div>
				<div class="item flex">
					<span class="select-radius-2 radius"></span>
					<span class="name">没空</span>
				</div>
				<div class="item flex">
					<span class="select-radius-3 radius"></span>
					<span class="name">已选</span>
				</div>
			</div>
			<div class="handle-date-and-button">
				<div class="select-start-end-date flex"  v-if="selecteds.length === 0">
					<div class="inner">
						<p class="title-name">按量预约日期</p>
						<div class="item" v-for="(item, index) in new Array(8).fill(0).map((_, i) => ({
							name: `${i + 1}张`
						}))"
						 :key="index"
						 v-on:click="selectRange(index + 1)"
						>{{item.name}}</div>
					</div>
				</div>
				<div class="select-start-end-date flex" v-else>
					<div class="inner">
						<div class="selected-item" v-for="(item, index) in selecteds" :key="index">
							<!-- <img style="width: 1.8rem;height:.74rem" src="@/assets/img/performance/homePage/yuyueriqi.png" /> -->
							<div class="top-zindex">
								<p class="date-value">{{
									item.split('/').filter((_, i) => i >= 1).map((e, i) => 
										i === 0 ? `${e}月` :
										i === 1 ? `${e}日` :
										'异常'
									).join('')
								}}</p>
								<p class="price-info">
									<span class="yufu-wenzi">预付</span>
									<span class="price">{{(price).toFixed('2')}}元</span>
								</p>
							</div>
							<i v-on:click="delectSelected(item)" class="close iconfont icon-guanbi"></i>
						</div>
					</div>
				</div>
				<div class="button button-unselect" v-if="selecteds.length === 0">下一步</div>
				<div class="button button-select" v-on:click="success" v-else>共预付 {{(price * selecteds.length).toFixed('2')}} 元</div>
			</div>
		</div>
	</div>
</div>
</template>

<script>
	import main from './js'
	export default main()
</script>

<style scoped>
@import './style/style.css';
</style>